<template>
  <!-- 文章详情页 -->
  <div>
    <div class="articlebanner">
      <div class="title">
        <h1>{{ articleDetail.title }}</h1>
        <div>
          <span>文章信息1</span>
          <span>文章信息2</span>
          <span>文章信息3</span>
        </div>
      </div>
    </div>
    <!-- 文章主体内容 -->
    <div class="w">
      <!-- 内容 -->
      <el-row>
        <el-col :xs="24" :md="18">
          <div class="articlecontent">
            <el-card>
              <Markdown :content="articleDetail.content"></Markdown>
              <div class="dianzan">
                <el-button
                  v-if="articleDetail.isUp"
                  disabled
                  type="info"
                  size="medium"
                  icon="fa fa-thumbs-o-up"
                  circle
                ></el-button>
                <el-button
                  type="primary"
                  size="medium"
                  icon="fa fa-thumbs-o-up"
                  circle
                  v-else
                  @click="articleUp()"
                ></el-button>
              </div>
              <Comment :articleid="id"></Comment>
            </el-card>
          </div>
        </el-col>
        <el-col :xs="0" :md="6">
          <div class="left">文章导航暂时不会弄</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Markdown from "./components/Markdown.vue";
import Comment from "./components/Comment.vue";
export default {
  data() {
    return {
      id: 0,
      type: "index",
      articleDetail: {
        title:"",
        content:"",
        isUp:false
      },
    };
  },
  components: {
    Markdown,
    Comment,
  },
  methods: {
    init() {
      this.getRequest(`/api/article/common/getArticleById?id=` + this.id).then(
        (res) => {
          this.articleDetail = res.data;
        }
      );
    },
    articleUp() {
      this.getRequest("/api/article/home/articleUp?id=" + this.id).then(
        (res) => {
          if(res.flag){
            this.articleDetail.isUp=true;
            this.$message.success("点赞成功");
          }
        }
      );
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.init();
  },
};
</script>

<style lang="less" scoped>
.articlebanner {
  position: relative;
  width: 100vw;
  height: 288px;
  overflow: hidden;
  background-color: #409eff;
  .title {
    position: absolute;
    text-align: center;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }
}
.articlecontent {
  .el-card {
    .el-card__body {
      padding: 0 !important;
    }
  }
}
.left {
  margin-left: 20px;
  width: 100%;
  height: 200px;
  background-color: aqua;
}
.dianzan {
  margin: 0 auto;
  width: 40px;
}
</style>